<#include "../layout/base.ftl">
<#macro header>
<style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    #header-panel {
        background: url("${base}/css/default/images/header_bg.png") repeat-x scroll 0 0;
    }

    .nav-panel {
        padding: 0;
    }

    .nav-panel div.nav-item {
        line-height: 25px;
        font-size: 13px;
        font-weight: bold;
        padding-left: 40px;
        cursor: pointer;
        list-style-type: none;
    }

    #center-tab {
        overflow: hidden;
    }

</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('body').omBorderLayout({
            panels: [
                {
                    id: "header-panel",
                    header: false,
                    region: "north"
                },
                {
                    id: "center-panel",
                    header: false,
                    region: "center"
                },
                {
                    id: "menu-panel",
                    header: false,
                    resizable: true,
                    collapsible: true,
                    region: "west",
                    width: 180
                },
                {
                    id: "footer-panel",
                    title: "<div style='text-align: center'>Copyright &copy; 2013&nbsp;&nbsp;淮矿现代物流有限责任公司&nbsp;&nbsp;版权所有&nbsp;&nbsp;All Rights Reserved.</div>",
                    region: "south",
                    height: 20
                }
            ],
            hideCollapsBtn: true
        });

        var tabElement = $('#center-tab').omTabs({
            height: "fit",
            tabMenu: true,
            border: false
        });

        // 导航面板
        $("#menu-panel>div").each(function (index, panel) {
            $(panel).omPanel({
                title: this.title,
                collapsible: true,
                // 面板收缩和展开的时候重新计算自定义滚动条是否显示
                onCollapse: function () {
                    $("#menu-panel").omScrollbar("refresh");
                },
                onExpand: function () {
                    $("#menu-panel").omScrollbar("refresh");
                }
            });
        });

        var ifh = tabElement.height() - tabElement.find(".om-tabs-headers").outerHeight() - 4;
        $("#home_page").height(ifh);

        $("#navTree").omTree({
            dataSource: "${base}/js/json/menu.json",
            simpleDataModel: true,
            onClick: function (nodeData, event) {
                if (nodeData.url) {
                    var tabId = tabElement.omTabs('getAlter', 'tab_' + nodeData.id);
                    if (tabId) {
                        tabElement.omTabs('activate', tabId);
                    } else {
                        tabElement.omTabs('add', {
                            title: nodeData.text,
                            tabId: 'tab_' + nodeData.id,
                            //content:"<iframe id='" + nodeData.id + "' border=0 frameBorder='no' name='inner-frame' scrolling=no src='" + nodeData.url + "' height='" + ifh + "' width='100%'></iframe>",
                            url: nodeData.url,
                            closable: true,
                            tabMenu: true
                        });
                    }
                }
            }
        });
    });
</script>
</#macro>
<#macro body>
<div id="header-panel">
    <div class="Useroperations">

        <p style="font-size: larger;font-weight: bold;">钢贸系统久其财务接口导入系统</p>
        <ul>
            欢迎您：<#if Session['SESSION_KEY']??>${Session['SESSION_KEY']['USER_NAME_SESSION_KEY']}</#if>
        </ul>
        <ul>
            <a href="${base}/main/logout"><img alt="" src="${base}/css/default/images/cross_octagon.gif"/>注销</a></li>
        </ul>
    </div>
</div>
<div id="menu-panel">
    <ul id="navTree"></ul>
</div>
<div id="center-panel">
    <div id="center-tab">
        <ul>
            <li><a href="#home_page_tab">首页</a></li>
        </ul>
        <div id="home_page_tab">
            <iframe id='home_page' border=0 frameBorder='no' src='' width='100%'></iframe>
        </div>
    </div>
</div>
<div id="footer-panel"></div>
</#macro>